<template>
  <cfDialog :dialogObj='dialogObj'>
    <div slot='content' v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' v-if="!dialogObj.id">
            <el-form-item label="上级部门" prop="parentId">
              <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="form.deptName" placeholder="请输入部门名称" />
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' v-if="!dialogObj.id">
            <el-form-item label="部门性质" prop="deptQuality">
              <el-select v-model="form.deptQuality" placeholder="请选择部门性质" style="width: 100%;">
                <el-option v-for="dict in findDeptQuality" :value="dict.dictValue" :label="dict.dictLabel" :key="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' v-if="form.deptQuality == 3">
            <el-form-item label="小区面积" prop="area">
              <el-input v-model="form.area" placeholder="请输入小区面积">
                <span slot="suffix">万m²</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="负责人" prop="leader">
              <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="邮 箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="部门状态">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in sysNormalDisable"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' v-if="form.deptQuality && form.deptQuality != 4">
            <el-form-item label="部门地址" prop="address">
              <el-input type="textarea" :rows="3" v-model="form.address" placeholder="请输入部门地址" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template slot='footer'>
      <el-button type="primary" size="small" v-if="!loading" @click="handleConfirm">确 定</el-button>
    </template>
  </cfDialog>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listDept, getDept, addDept, updateDept, listDeptExcludeChild, findDeptQuality } from "@/api/system/dept";
export default {
  components: { Treeselect },
  props: {
    dialogObj: {
      type: Object,
      default: ({
        visible: false,
        type: '',
        id: '',
        title: '',
        width: '538px'
      })
    }
  },
  data() {
    return {
      form: {},
      deptOptions: [], /**部门下拉项 */
      findDeptQuality: [], /**部门性质 */
      rules: {
        parentId: [
          { required: true, message: "上级部门不能为空", trigger: "blur" }
        ],
        deptName: [
          { required: true, message: "部门名称不能为空", trigger: "blur" }
        ],
        area: [
          {required: true, message: "小区面积不能为空", trigger: "blur" }
        ],
        orderNum: [
          { required: true, message: "显示排序不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "部门地址不能为空", trigger: "blur" }
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phone: [
          {
            required: true,
            // pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      },
      loading: false
    }
  },
  created() {
    this.getSysNormalDisable();
    this.getfindDeptQuality();
    if(this.dialogObj.id) {
      this.getDeptDetail();
    } else {
      this.getListDept();
      this.form = {
        deptId: undefined,
        parentId: this.dialogObj.parentId,
        deptName: undefined,
        area: undefined,
        deptQuality: undefined,
        orderNum: undefined,
        leader: undefined,
        phone: undefined,
        email: undefined,
        address: undefined,
        status: "0"
      }
    }
  },
  methods: {
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    /**编辑时获取详情 */
    async getDeptDetail() {
      this.loading = true;
      const response = await listDeptExcludeChild(this.dialogObj.id);
      if(response.code == 200) {
        this.deptOptions = this.handleTree(response.data, "deptId");
        if (this.deptOptions.length == 0) {
          const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] };
          this.deptOptions.push(noResultsOptions);
        }
      }
      const res = await getDept(this.dialogObj.id);
      if(res.code == 200) {
        this.form = res.data;
      }
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    getListDept() {
      listDept().then(response => {
        this.deptOptions = this.handleTree(response.data, "deptId");
      });
    },
    /**获取部门性质 */
    async getfindDeptQuality() {
      const res = await findDeptQuality();
      if(res.code == 200) {
        this.findDeptQuality = res.rows;
      }
    },
    /**确定按钮提交功能*/
    handleConfirm() {
      this.submitForm('form', async () => {
        this.loading = true;
        let res;
        if (this.form.deptId != undefined) {
          res = await updateDept(this.form);
        } else {
          res = await addDept(this.form);
        }
        if(res.code == 200) {
          this.$modal.msgSuccess("操作成功");
          this.loading = false;
          setTimeout(() => {
            location.reload();
          }, 1000);
        }
      })
    },
  }
}
</script>